<template>
    <div class="home">
        <el-container>
            <el-header>
                <div class="header_box">
                    <div class="logo_box">
                        <img src="http://shiyansong.cn/img/heima.b5a855ee.png" alt="">
                        <span>电商后台管理系统</span>
                    </div>
                    <div class="button_box">
                        <el-button type="info" @click="logOutBtn">退出</el-button>
                    </div>
                </div>
            </el-header>
            <el-container>
                <el-aside :width="isCollapse?'64px':'200px'">
                    <div class="rights_box" @click="flexibleBtn">|||</div>
                    <rights-com></rights-com>
                </el-aside>
                <el-main><router-view></router-view></el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex';
import rightsCom from './components/rightsCom.vue'
export default {
    name: 'MyAppIndex',
    components: { rightsCom },
    data() {
        return {

        };
    },

    mounted() {

    },
    computed: {
        ...mapState('login', ['isCollapse'])
    },
    methods: {
        ...mapActions('login', ['logOutActions']),
        ...mapMutations('login',['iscollapse']),
        // 点击退出按钮
        async logOutBtn() {
            try {
                await this.logOutActions()
                this.$router.push('/')
                this.$message.success('退出登录成功')
            } catch (error) {
                this.$message.error(error)
            }
        },
        flexibleBtn() {
            this.iscollapse()
        }
    },
};
</script>

<style lang="scss" scoped>
.el-container {
    width: 100vw;
    height: 100vh;
}

.el-header {
    background-color: #373d41;
    color: #fff;

    .header_box {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo_box {
            img {
                vertical-align: middle;
            }

            span {
                font-size: 20px;
                margin-left: 20px;
            }
        }
    }
}

.el-aside {
    background-color: #333744;
    color: #333;
    height: 100%;

    .rights_box {
        width: 100%;
        height: 20px;
        background: #4a5064;
        text-align: center;
        color: #fff;
    }
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
}
</style>